<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>

    <!-- 3.组件的使用-->
    <!-- 全局注册 -->
    <my-cpn></my-cpn>
    <div>
        <my-cpn-t></my-cpn-t>
    </div>

    <!-- 局部注册 -->
    <j-my-cpn></j-my-cpn>
    <j-my-cpn-t></j-my-cpn-t>

</div>

<!-- 无效，必须在vue实例下！！！-->
<my-cpn></my-cpn>

<div id="app2">
    <my-cpn></my-cpn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 1.创建组件构造器对象
    const cpnC = Vue.extend({
        template: `
            <div>
                <h2>标题</h2>
                <p>第一段内容</p>
                <p>第二段内容</p>
            </div>
        `
    })

    // 2.注册组件（全局组件，多个vue实例下都可使用，一般实际开发场景只有一个实例）
    Vue.component('my-cpn', cpnC)


    // vue官网最新介绍（https://cn.vuejs.org/v2/guide/components.html）
    Vue.component('MyCpnT', {
        template: `
            <div>
                <h2>标题</h2>
                <p>第一段内容</p>
                <p>第二段内容</p>
            </div>
        `
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: 'simplelu'
        },
        // 组件局部注册
        components: {
            'j-my-cpn': cpnC,
            'JMyCpnT': {
                template: `
                    <div>
                        <h2>标题</h2>
                        <p>第一段内容</p>
                        <p>第二段内容</p>
                    </div>
        `
            }
        }
    })

    const app2 = new Vue({
        el: '#app2'
    })
</script>
</body>
</html>